<template>
  <div class="breadcrumb">
    <px-button class="mr-[4px] action" :icon="ArrowLeft" circle @click.stop="back()" />
    <px-breadcrumb separator="/">
      <px-breadcrumb-item v-for="item in breadcrumbItems" :key="item.id">
        <div
          class="flex justify-between items-center text-[18px]"
          :class="{ 'cursor-pointer': item.isClick !== 0, 'cursor-not-allowed': item.isClick === 0 }"
        >
          <span @click="handleClick(item)">
            {{ item.name }}
          </span>
        </div>
      </px-breadcrumb-item>
    </px-breadcrumb>
    <px-button
      class="ml-[4px] action w-[10px] h-[10px]"
      :class="{ active: toggleTree }"
      :icon="CaretRight"
      type="info"
      circle
      @click.stop="toggleDropdown()"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, inject, watchEffect, computed } from "vue";
import { PxBreadcrumb, PxBreadcrumbItem } from "px-ui";
import { CaretRight, ArrowLeft } from "@px-ui/icons-vue";

interface BreadcrumbItem {
  label: string;
  path: string;
  type: string;
  code: string;
  children?: BreadcrumbItem[];
}

const props = defineProps<{
  positionCode: string;
  treeData: Record<string, any> | null;
  cameraItem: Record<string, any> | null;
}>();
const breadcrumbItems = computed(() => {
  let curBreadcurmb = props.treeData[props.positionCode];
  let res = [];

  if (curBreadcurmb) {
    const { path } = curBreadcurmb;
    let pathArr = path?.split("@") || [localStorage.getItem("facCode")];
    if (pathArr && pathArr.length > 0) {
      pathArr.forEach(item => {
        if (props.treeData[item]) {
          res.push(props.treeData[item]);
        }
      });
    }
  } else if (props.cameraItem) {
    const { name } = props.cameraItem;
    res.push({ name, id: 1 });
  }
  return res;
});

const toggleTree = defineModel("toggleTree");

// watch(
//   () => props.treeData,
//   (newVal, oldVal) => {
//     if (newVal) {
//       setData();
//     }
//   },
//   {
//     immediate: true
//   }
// );
// watch(
//   () => positionCod.value,
//   val => {
//     console.log(val);
//     debugger;
//     if (val) {
//       setData();
//     }
//   },
//   {
//     immediate: true
//   }
// );
// function setData() {
//   let curBreadcurmb = props.treeData[props.positionCode];
//   breadcrumbItems.value = [];
//   if (curBreadcurmb) {
//     const { path } = curBreadcurmb;
//     let pathArr = path?.split("@") || [localStorage.getItem("facCode")];
//     if (pathArr && pathArr.length > 0) {
//       pathArr.forEach(item => {
//         if (props.treeData[item]) {
//           breadcrumbItems.value.push(props.treeData[item]);
//         }
//       });
//     }
//   }
// }
const emit = defineEmits<{
  (e: "breadcrumb-click", item: BreadcrumbItem): void;
  (e: "back"): void;
}>();

const handleClick = item => {
  if (item.isClick === 0) return;
  emit("breadcrumb-click", { code: item.code, type: item.type });
};
const back = () => {
  emit("back");
};
const toggleDropdown = () => {
  toggleTree.value = !toggleTree.value;
};
</script>

<style scoped>
.breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 45px;
  padding: 12px;
  background: #fff;
  backdrop-filter: blur(10px);
  border-radius: 50px;
  opacity: 0.75;
}

.el-breadcrumb {
  font-size: 14px;
  color: #606266;
}

.el-breadcrumb-item {
  cursor: pointer;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-icon--right {
  margin-left: 5px;
}

:deep(.el-breadcrumb__inner) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:deep(.el-breadcrumb__separator) {
  align-self: flex-start;
}

:deep(.px-breadcrumb__item:last-child .px-breadcrumb__inner) {
  font-weight: 900 !important;
  color: #3b82f6;
}

:deep(.px-breadcrumb__item .px-breadcrumb__inner) {
  font-weight: 400;
  color: rgb(0 0 0 / 80%);
}

:deep(.el-icon) {
  outline: none;
}

.active {
  transform: rotate(180deg);
}

.action {
  transition: transform 0.3s ease;
}
</style>
